<template>
  <div class="header">
    <div class="option">
      <div class="btn1" @click="operate1(unfold1)">初级</div>
      <div
        :class="[
          'options1',
          this.unfold1 && this.unfold1 === '1' ? 'unfold1' : '',
        ]"
      >
        <div class="option1">
          <div class="title">姓名</div>
          <input type="text" class="text" />
        </div>
        <div class="option1">
          <div class="title">年龄</div>
          <input type="text" class="text" />
        </div>
        <div class="option1">
          <div class="title">学历</div>
          <input type="text" class="text" />
        </div>
        <div class="option1">
          <div class="title">qq</div>
          <input type="text" class="text" />
        </div>
        <div class="option1">
          <div class="title">电话</div>
          <input type="text" class="text" />
        </div>
        <div class="option1">
          <div class="title">e-mail</div>
          <input type="text" class="text" />
        </div>
        <div class="option1">
          <div class="title">地址</div>
          <input type="text" class="text" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.header {
  .option {
    .options1 {
      transition: all 0.5s;
      display: none;
      margin-left: 20px;
      .option1 {
        display: flex;
        .title {
        }
        .text {
        }
      }
    }
    .btn1 {
      color: #000;
      cursor: pointer;
      font-weight: bold;
      user-select: none;
      font-size: 20px;
    }
    .unfold1 {
      display: block;
    }
    .btn2 {
      font-weight: bold;
      user-select: none;
      font-size: 20px;
    }
    .btn3 {
      font-weight: bold;
      user-select: none;
    }
    .options2 {
      transition: all 0.5s;
      display: none;
      margin-left: 20px;
      .button {
      }
      .selectbox {
        width: 100%;
        height: 120px;
        .select {
          display: flex;
          position: relative;
          .left {
            font-weight: bold;
            padding-right: 10px;
            margin-left: 20px;
          }
          .right {
            ul {
              display: flex;
              position: relative;
              .box1 {
                position: absolute;
                left: -8px;
                top: -19px;
                li {
                  font-size: 14px;
                  padding-left: 10px;
                  padding-right: 7px;

                  .el-menu-demo {
                    .t1 {
                      .title {
                      }
                    }
                  }
                  .title {
                  }
                }
              }
              .box2 {
                position: absolute;
                left: 85px;
                top: -19px;
              }
              .box3 {
                position: absolute;
                left: 169px;
                top: -19px;
              }
              .box4 {
                position: absolute;
                left: 254px;
                top: -19px;
              }
              .box5 {
                position: absolute;
                left: 339px;
                top: -19px;
              }
              .box6 {
                position: absolute;
                left: 423px;
                top: -19px;
              }
              .box7 {
                position: absolute;
                left: 506px;
                top: -19px;
              }
              .box8 {
                position: absolute;
                left: 587px;
                top: -19px;
              }
              .box9 {
                position: absolute;
                left: 671px;
                top: -19px;
              }
              .box10 {
                position: absolute;
                left: 756px;
                top: -19px;
              }
              .box11 {
                position: absolute;
                left: 841px;
                top: -19px;
              }
              .box12 {
                position: absolute;
                left: 927px;
                top: -19px;
              }
              .box13 {
                position: absolute;
                left: 1008px;
                top: -19px;
              }
              .box14 {
                position: absolute;
                left: 1088px;
                top: -19px;
              }
              .box15 {
                position: absolute;
                left: 1165px;
                top: -19px;
              }
              .box16 {
                position: absolute;
                left: 1248px;
                top: -19px;
              }
              .box17 {
                position: absolute;
                left: -11px;
                top: 47px;
              }
            }
          }
          .son1 {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 106px;
            top: 22px;
            li {
              width: 83px;
              height: 30px;
              line-height: 30px;
              background-color: grey;
              text-align: center;
            }
          }
          .son2 {
            position: absolute;
            left: 184px;
            top: 20px;
          }
        }
      }
    }
    .unfold2 {
      display: block;
    }
    .options3 {
      transition: all 0.5s;
      display: none;
      margin-left: 20px;
      .option3 {
        display: flex;
        .title4 {
          font-weight: bold;
          user-select: none;
        }
        .btn4 {
          margin-left: 20px;
          color: #000;
          cursor: pointer;
          user-select: none;
        }
        .options4 {
          display: flex;
        }
        .unfold4 {
          display: block;
        }
      }
    }
    .btn3 {
      color: #000;
      cursor: pointer;
      font-weight: bold;
      user-select: none;
      font-size: 20px;
    }
    .unfold3 {
      display: block;
    }
  }
}
</style>


<script>
export default {
  name: "Primary",
  data() {
    return {
      unfold1: "0",
    };
  },
  methods: {
    operate1(value1) {
      console.log(value1);
      if (value1 == "1") {
        this.unfold1 = "0";
      } else {
        this.unfold1 = "1";
      }
    },
  },
};
</script>